<template>
    <view class="love-car">
        <view class="top">
            <image
                @click="back"
                src="https://z3.ax1x.com/2021/04/08/cYSVW4.png"
                mode=""
            ></image>
            <view class="top-title"> 选择品牌 </view>
        </view>
        <view class="love-car-search">
            <view class="content-center">
                <view class="tool-search-input">
                    <image
                        class="search-back-icon"
                        src="https://z3.ax1x.com/2021/04/08/cYpC1H.png"
                    ></image>
                    <text>请输入车系名字（如：朗逸）</text>
                </view>
            </view>
            <view class="saoma">
                <image src="https://z3.ax1x.com/2021/04/09/cUpAot.png"></image>
                <view class="saomaText"> 扫码识车 </view>
            </view>
        </view>
        <view class="bottom">
            <view class="bottom-content-host">
                <view class="host-title">热门品牌</view>
                <view class="brand-logo">
                    <view
                        class="brand-item"
                        v-for="item in hotBrand"
                        :key="item.id"
                    >
                        <image :src="item.brandImg" class="brand-img"></image>
                        <view class="brand-text">
                            {{ item.title }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="bottom-content-type">
                <view
                    class="type-item"
                    v-for="item1 in brandInfo"
                    :key="item1.key"
                >
                    <view class="type-title">{{ item1.key }}</view>
                    <view
                        class="type-content"
                        v-for="item2 in item1.value"
                        :key="item2.carbrandId"
                        @click="openDrawer(item2.carbrandId, item2)"
                    >
                        <view class="type-content-item">
                            <image :src="item2.carbrandImage" mode=""></image>
                            <text>{{ item2.carbrandName }}</text>
                        </view>
                    </view>
                </view>
                <uni-drawer mode="right" ref="drawer" :mask="true">
                    <view class="uni-drawer-content">
                        <view class="car-list-title"> 选择车系 </view>
                        <view class="car-list-all">
                            <view class="car-list-item">
                                <view class="item-top">
                                    <image
                                        :src="carItem.carbrandImage"
                                        mode=""
                                    ></image>
                                    <text>{{ carItem.carbrandName }}</text>
                                </view>
                                <view class="item-center">
                                    {{ carItem.carbrandName }}
                                </view>
                                <view class="item-bottom">
                                    <template v-for="item4 in carList">
                                        <navigator
                                            open-type="navigate"
                                            :url="
                                                '../carType/carType?carseriesId=' +
                                                item4.carseriesId
                                            "
                                            :key="item4.carseriesId"
                                            hover-class="none"
                                        >
                                            <view class="item-item">{{
                                                item4.carseriesFullName
                                            }}</view>
                                        </navigator>
                                    </template>
                                </view>
                            </view>
                        </view>
                    </view>
                </uni-drawer>
                <view class="letters">
                    <view
                        :class="['letters-item', item3.state ? 'active' : '']"
                        @click="changeLettersState(item3.id)"
                        v-for="item3 in letters"
                        :key="item3.id"
                        >{{ item3.text }}</view
                    >
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
let { mapActions, mapState } = createNamespacedHelpers("mineCar");
export default {
    data() {
        return {
            carItem: {},
            hotBrand: [
                {
                    id: 0,
                    title: "奥迪",
                    brandImg: "https://z3.ax1x.com/2021/04/10/calves.png",
                },
                {
                    id: 1,
                    title: "别克",
                    brandImg: "https://z3.ax1x.com/2021/04/10/ca8aQS.png",
                },
                {
                    id: 2,
                    title: "奔驰",
                    brandImg: "https://z3.ax1x.com/2021/04/10/ca8dsg.png",
                },
                {
                    id: 3,
                    title: "宝马",
                    brandImg: "https://z3.ax1x.com/2021/04/10/cai3LD.png",
                },
                {
                    id: 4,
                    title: "大众",
                    brandImg: "https://z3.ax1x.com/2021/04/10/cai1sO.png",
                },
                {
                    id: 5,
                    title: "长安",
                    brandImg: "https://z3.ax1x.com/2021/04/10/caiUJI.png",
                },
                {
                    id: 6,
                    title: "福特",
                    brandImg: "https://z3.ax1x.com/2021/04/10/caiJdH.png",
                },
                {
                    id: 7,
                    title: "吉利",
                    brandImg: "https://z3.ax1x.com/2021/04/10/caiYod.png",
                },
                {
                    id: 8,
                    title: "日产",
                    brandImg: "https://z3.ax1x.com/2021/04/10/caiNFA.png",
                },
            ],
            letters: [
                { id: "A", text: "A", state: false },
                { id: "B", text: "B", state: false },
                { id: "C", text: "C", state: false },
                { id: "D", text: "D", state: false },
                { id: "E", text: "E", state: false },
                { id: "F", text: "F", state: false },
                { id: "G", text: "G", state: false },
                { id: "H", text: "H", state: false },
                { id: "I", text: "I", state: false },
                { id: "J", text: "J", state: false },
                { id: "K", text: "K", state: false },
                { id: "L", text: "L", state: false },
                { id: "M", text: "M", state: false },
                { id: "N", text: "N", state: false },
                { id: "O", text: "O", state: false },
                { id: "P", text: "P", state: false },
                { id: "Q", text: "Q", state: false },
                { id: "R", text: "R", state: false },
                { id: "S", text: "S", state: false },
                { id: "T", text: "T", state: false },
                { id: "U", text: "U", state: false },
                { id: "V", text: "V", state: false },
                { id: "W", text: "W", state: false },
                { id: "X", text: "X", state: false },
                { id: "Y", text: "Y", state: false },
                { id: "Z", text: "Z", state: false },
            ],
            carList: [],
        };
    },
    onLoad() {
        this.getCarBrandAll();
    },
    methods: {
        ...mapActions(["getCarBrandAll", "getCarListAll"]),
        changeLettersState(val) {
            this.letters.map((item) => {
                if (val == item.id) {
                    return (item.state = true);
                } else {
                    return (item.state = false);
                }
            });
        },
        back() {
            uni.navigateBack({
                delta: 1,
            });
        },
        onchange(e) {
            console.log(e);
            // const value = e.detail.value
        },
        async openDrawer(val, itemval) {
            this.carItem = itemval;
            uni.setStorageSync("carItem", JSON.stringify(this.carItem));
            let data = await this.getCarListAll(val);
            this.carList = data;
            this.$refs.drawer.open();
        },
    },
    computed: {
        ...mapState(["brandInfo", "carListInfo"]),
    },
};
</script>

<style lang="scss" scoped>
.love-car {
    .top {
        width: 100vw;
        height: 200rpx;
        box-sizing: border-box;
        background-image: linear-gradient(to right, #ff7c16, #ff5401);
        display: flex;
        align-items: center;
        padding-top: 120rpx;
        box-sizing: border-box;
        image {
            width: 64rpx;
            height: 64rpx;
            // border: 1px solid red;
        }
        .top-title {
            margin-left: 240rpx;
            color: white;
            font-size: 36rpx;
            font-weight: bold;
        }
    }
    .love-car-search {
        display: flex;
        align-items: center;
        .content-center {
            width: 80vw;
            margin: 20rpx auto 0rpx;
            .tool-search-input {
                width: 100%;
                height: 70rpx;
                line-height: 70rpx;
                border-radius: 40rpx;
                border: 2rpx solid #ffaa00;
                color: #ff841d;
                display: flex;
                align-items: center;
                .search-back-icon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-left: 20rpx;
                    margin-right: 20rpx;
                }
            }
        }
        .saoma {
            text-align: center;
            margin-top: 20rpx;
            margin-right: 20rpx;
            image {
                width: 40rpx;
                height: 40rpx;
            }
            .saomaText {
                font-size: 24rpx;
                color: #ff7c16;
            }
        }
    }
    .bottom {
        width: 100vw;
        height: 100vh;
        margin-top: 20rpx;
        .bottom-content-host {
            margin-bottom: 20rpx;
            .host-title {
                font-weight: bold;
                font-size: 36rpx;
                width: 100vw;
                height: 80rpx;
                line-height: 80rpx;
                padding-left: 20rpx;
                box-sizing: border-box;
                background-color: #f9f9f9;
            }
            .brand-logo {
                width: 100vw;
                // height: 500rpx;
                background-color: white;
                display: flex;
                flex-wrap: wrap;
                .brand-item {
                    width: 145rpx;
                    height: 145rpx;
                    // border: 1px solid red;
                    text-align: center;
                    font-family: "黑体";
                    margin-top: 20rpx;
                    .brand-img {
                        // border: 1px solid red;
                        width: 100rpx;
                        height: 100rpx;
                    }
                }
            }
        }
        .bottom-content-type {
            position: relative;
            .type-item {
                .type-title {
                    font-weight: bold;
                    font-size: 32rpx;
                    width: 100vw;
                    height: 80rpx;
                    line-height: 80rpx;
                    padding-left: 20rpx;
                    box-sizing: border-box;
                    background-color: #f9f9f9;
                }
                .type-content {
                    width: 100vw;
                    height: 100rpx;
                    // border: 1px solid red;
                    .type-content-item {
                        height: 100rpx;
                        display: flex;
                        align-items: center;
                        // background-color: red;
                        margin-top: 20rpx;
                        image {
                            width: 100rpx;
                            height: 100rpx;
                            margin-left: 20rpx;
                            margin-right: 20rpx;
                        }
                    }
                }
            }
            .uni-drawer-content {
                width: 100vw;
                height: 200rpx;
                background-color: #ff5401;
                .car-list-title {
                    font-size: 32rpx;
                    font-weight: bold;
                    box-sizing: border-box;
                    padding-top: 150rpx;
                    color: white;
                    padding-left: 20rpx;
                }
                .car-list-all {
                    width: 100%;
                    height: 100vh;
                    margin-top: 20rpx;
                    // background-color: black;
                    .car-list-item {
                        .item-top {
                            image {
                                width: 100rpx;
                                height: 100rpx;
                                vertical-align: middle;
                                margin-left: 30rpx;
                            }
                            text {
                                font-family: "黑体";
                                margin-left: 50rpx;
                                vertical-align: middle;
                            }
                        }
                        .item-center {
                            width: 100%;
                            height: 80rpx;
                            background-color: #f9f9f9;
                            line-height: 80rpx;
                            padding-left: 30rpx;
                            box-sizing: border-box;
                        }
                        .item-bottom {
                            .item-item {
                                width: 100%;
                                height: 80rpx;
                                line-height: 80rpx;
                                padding-left: 30rpx;
                                box-sizing: border-box;
                                border-bottom: 1px solid #f9f9f9;
                            }
                        }
                    }
                }
            }
            .letters {
                position: absolute;
                right: 20rpx;
                top: 20rpx;
                text-align: center;
                .letters-item {
                    font-size: 26rpx;
                    margin-top: 5rpx;
                    &.active {
                        color: #ff7c16;
                    }
                }
            }
        }
    }
}
</style>
